    {% extends "mybase.html"  %}

    {% block content -%}
    <div class="container" style="width: 80%">
        <div class="row clearfix">
          <div class="col-md-12 column" style="margin-top:15px">
            <div class="row clearfix" align="center">
              <div class="col-md-2 col-md-offset-1 column summary" onclick="location.href='/'">
                <h3>总任务数</h3>
                <h4>{{ all_num }}</h4>
              </div>
              <div class="col-md-2 column summary"  onclick="location.href='/?status=finished'">
                <h3 style="color:green">已完成任务数</h3>
                <h4>{{ finished_num }}</h4>
              </div>
              <div class="col-md-2 column summary" onclick="location.href='/?status=unfinished'">
                <h3 style="color:yellow">未完成任务数</h3>
                <h4>{{ unfinished_num }}</h4>
              </div>
              <div class="col-md-2 column summary" onclick="location.href='/?status=outdated'">
                <h3 style="color:red">已过期任务数</h3>
                <h4>{{ outdate_num }}</h4>
              </div>
            </div>
          </div>
        </div>

      <div class="row col-md-12" id="resultlist">
        {% if results %}
          <table class="table">
            <caption style="text-align:center; font-size: 20px; font-weight: 400; color: black;">Todolist 任务列表</caption>
            <thead>
              <tr>
                <th>序号</th>
                <th>任务</th>
                <th>详情</th>
                <th>类别</th>
                <th>提交人</th>
                <th>状态</th>
                <th>过期时间</th>
                <th>提交时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              {% for result in results %}
                <tr>
                  <td>{{ loop.index }}</td>
                  <td>{{ result.task }}</td>
                  <td>{{ result.description | safe | truncate(50, True)}} </td>
                  <td>{{ result.category }}</td>
                  <td>{{ result.author }}</td>

                  {% if result.status() == "已完成" %}
                    <td style="color:green"> <span class="glyphicon glyphicon-ok-circle" style="color:green"></span>  {{ result.status() }} </td>
                  {% elif result.status() == "已过期" %}
                    <td style="color: red"><span class="glyphicon glyphicon-exclamation-sign" style="color:red"></span>  {{ result.status() }} </td>
                  {% else %}
                    <td> <span class="glyphicon glyphicon-time"></span> {{ result.status() }} </td>
                  {% endif %}
                  
                  <td>{{ result.expire_time.strftime("%Y-%m-%d") }}</td>
                  <td>{{ result.create_time }}</td>
                  <td>
                      <a class="btn btn-xs " href="/todolist/edit/{{result.id}}" role="button"><span
                          class="glyphicon glyphicon-edit"></span></a>
                      <a class="btn btn-xs" href="/todolist/delete/{{result.id}}" role="button"><span
                          class="glyphicon glyphicon-trash"></span></a>
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
      {% else %}
        <div >
          <p>No task found!</p>
        </div>
        {% endif %}  
    </div>

  </div>
{% endblock content %}
 
